 <template>
    <div class="hotItem-wrapper">
        <p class="hotItem-title">热销项目</p>
        <!-- <productItem :hotItemSub="hotItem"/> -->
        <div class="prdtItem-wrapper" :class="{ 'hot-item': hotItemSub === true }">
            <div class="item-wrapper">
                <div v-for="(item, index) in productlist" :key="item.id" class="item-box">
                    <div class="img-wrap">
                        <router-link :to="{ name: '/product/detail', query: {id: item.product_id} }">
                            <img class="ad-img" :src="constant.api_url + item.home_thumb">
                        </router-link>
                    </div>
                    <div class="bottom-info">
                        <div class="box-l item-title">
                            <router-link :to="{ name: '/product/detail', query: {id: item.product_id} }">
                                <p style="text-indent: 0.16rem">{{item.product_title}}</p>
                            </router-link>
                        </div>
                        <div class="box-r item-price" v-if="hotItemSub">
                            <p>
                                <span class="icon iconfont icon-fl-renminbi"></span>
                                <span class="num-txt">{{item.product_price}}</span>元
                            </p>
                        </div>
                    </div>
                    <div class="bottom-feature" v-if="is_user">
                        <div class="box-l">
                            <p>
                                <span class="icon iconfont icon-yanjing"></span>
                                <span class="view-txt">{{item.views}}人已看</span>
                            </p>
                        </div>
                        <div class="box-r">
                            <!-- <p class="like-txt">
                                <a href="javascript:;" @click="zan(item, index)">
                                    <span class="icon iconfont icon-dianzan"></span>
                                    <span class="num-txt">{{item.zan_count}}</span>
                                </a>
                            </p> -->

                            <p class="collect-txt">
                                <a href="javascript:;" @click="collect(item, index)">
                                    <span class="icon iconfont icon-xingxing"></span>
                                    <span class="num-txt">{{item.collect_count}}</span>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="bottom-cart" v-if="!hotItemSub">
                        <div class="box-l item-price">
                            <p>
                                <span class="icon iconfont icon-fl-renminbi"></span>
                                <span class="num-txt">{{item.product_price}}</span>元
                            </p>
                        </div>
                        <div class="box-r item-cart">
                            <span class="icon iconfont icon-gouwuche"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

 <script type="text/ecmascript-6">
//import productItem from "@/views/product/components/productItem";
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";

export default {
  name: "",
  data() {
    return {
      hotItem: true,
      hotItemSub: true,
      productlist: [],
      constant: constant,
      is_user: false
    };
  },
  components: {
    //productItem
  },
  methods:{
    zan(item, index) {
      let id = this.$route.query.id;
      http.get(this, {
        url: "product/zan",
        data: {
          product_id: item.product_id,
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("产品点赞:", data);
          if (data.status == 1) {
            //this.productlist[index] = data.info;
            this.$set(this.productlist[index],'zan_count', data.info.zan_count);
          }
        }
      });
    },
    collect(item, index) {
      http.get(this, {
        url: "product/collect",
        data: {
          product_id: item.product_id,
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("s:", data);
          if (data.status == 1) {
            //this.productlist[index] = data.info;
            this.$set(this.productlist[index],'collect_count', data.info.collect_count);
          }
        }
      });
    },
  },
  created() {
    http.get(this, {
      url: "product/product_list",
      data: {
        pagesize: 4
      },
      dataType: "json",
      success: function(data) {
        console.log("首页产品:", data);
        if (data.status == 1) {
          this.$data.productlist = data.info.list;
        }
      }
    });

    if(localStorage.getItem('user_type') == 0){
      this.is_user = true
    }
  }
};
</script>

<style scoped lang="scss">
.hotItem-wrapper {
  @extend .cmm-border;

  .hotItem-title {
    font-size: 0.32rem;
    width: 80%;
    margin: auto;
    text-align: center;
    background-color: $c-white-light;
    margin-top:0.3rem;
  }
}

.prdtItem-wrapper {
  color: $c-mainC;
  background-color: $c-white-light;
  padding: 0;

  width: 100%;
  text-align: center;

  .item-title {
    font-size: 0.32rem;
    width: 80%;
    margin: auto;
    text-align: center;
  }

  .item-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
  }

  .item-box {
    margin: 0.3rem 0 0.1rem;
    width: 3.46rem;

    .img-wrap {
      width: 100%;
      height: 2.37rem;
      overflow: hidden;
      position: relative;
      border-radius: 0.1rem;

      .ad-img {
        @extend .cmm-translateXY;
          width:100%;
          height:100%;
      }
    }

    $letHeight: 0.52rem;

    .bottom-info {
      @extend .cmm-clearfix;
      height: 0.68rem;
      margin-top: 0.14rem;
      padding-right: 0.2rem;

      .box-l {
        width: 100%;
        float: none;
      }

      .box-r {
        width: 50%;
        float: right;
      }

      .item-title {
        p {
          width: 100%;
          font-size: 0.26rem;
          line-height: 0.3rem;
          text-align: left;
        }
      }
    }

    .item-price {
      p {
        font-size: 0.32rem;
        color: $c-themeC;
        text-align: right;
        line-height: 0.68rem;
        letter-spacing: -0.01rem;
      }

      span {
        display: inline-block;
        line-height: 0.52rem;
        float: left;
      }

      .icon {
        font-size: 0.4rem;
        margin-right: 0rem;
      }
    }

    .bottom-feature {
      @extend .cmm-clearfix;
      height: $letHeight;
      margin-top: 0.14rem;
      clear: both;

      .box-l {
        width: 50%;
        float: left;

        p {
          color: $c-mainC;
          font-size: 0.22rem;
          white-space: nowrap;
          letter-spacing: -0.02rem;

          * {
            vertical-align: middle;
            display: inline-block;
          }

          span {
            line-height: 0.52rem;
          }
        }

        .icon {
          font-size: 0.28rem;
          color: $c-themeC;
          font-weight: bold;
        }
      }

      .box-r {
        width: 50%;
        text-align: right;
        float: right;

        p {
          display: inline-block;
          line-height: $letHeight;
          white-space: nowrap;
          letter-spacing: -0.02rem;

          * {
            vertical-align: middle;
            display: inline-block;
            letter-spacing: -0.02rem;
          }
        }

        .like-txt {
          width: 50%;
          float: left;
        }
        .collect-txt {
          width: 50%;
          float: left;
        }

        p {
          span {
            line-height: 0.52rem;
          }
        }

        .icon {
          line-height: 0.52rem;
          display: inline-block;
          font-size: 0.4rem;
          font-size: 0.28rem;
          color: $c-themeC;
          font-weight: bold;
        }

        .num-txt {
          color: $c-mainC;
          font-size: 0.22rem;
          line-height: 0.52rem;
        }
      }
    }

    .bottom-cart {
      .box-l {
        width: 50%;
        float: left;
      }
      .box-r {
        width: 50%;
        float: right;
      }
      .item-price {
        text-align: left;
        vertical-align: top;

        * {
          vertical-align: top;
        }
      }

      .item-cart {
        text-align: right;
        vertical-align: top;

        * {
          vertical-align: top;
        }
        .icon {
          font-size: 0.4rem;

          color: $c-themeC;
        }
      }
    }
  }

  .submit-btn {
    width: 6.26rem;
    border-radius: 0.8rem;
    background-color: $c-themeBg;
    font-size: 0.36rem;
    font-weight: normal;
    color: $c-white-light;
    $letHeight: 0.8rem;
    height: $letHeight;
    line-height: $letHeight;
    text-align: center;
    margin: 0.78rem auto;
    display: inline-block;
  }
}

.prdtItem-wrapper.hot-item {
  padding: 0.0rem 0.2rem;

  .item-title {
  }

  .item-box {
    margin: 0.3rem auto 0.1rem;
    width: 100%;

    .img-wrap {
      height: 3rem;
      .ad-img {
      }
    }

    $letHeight: 0.52rem;
    .bottom-info {
      height: 0.68rem;
        line-height: 0.68rem;
      margin-top: 0.18rem;
      background-color: $c-gray-dark;

      .box-l {
        width: 50%;
        float: left;
      }

      .box-r {
      }

      .item-title {
        p {
          @extend .cmm-txtOverflow;
            line-height: 0.68rem;
        }
      }
    }

    .item-price {
      p {
      }

      span {
        float: none;
      }

      .icon {
        font-size: 0.36rem;
        margin-right: -0.1rem;
      }
    }

    .bottom-feature {
      .box-l {
        p {
          letter-spacing: 0;
          * {
          }
          span {
            letter-spacing: 0;
          }
        }

        .icon {
          font-size: 0.36rem;
        }
      }

      .box-r {
        p {
          letter-spacing: 0px;

          * {
            letter-spacing: 0px;
          }
        }

        .like-txt {
          width: 30%;
          float: none;
        }
        .collect-txt {
          width: 30%;
          float: none;
        }

        p {
          span {
          }
        }

        .icon {
        }

        .num-txt {
        }
      }
    }
  }
}
</style>
